<template>
  <div class="delayApply_index">
    <div class="content inner">
      <div class="delay_wrap">
        <div class="delay_hd">
          <div class="title"><i>延缓入学申请登记</i></div>
        </div>
        <div class="delay_bd">
          <div class="hd" v-if="delayResult">
            <div class="hd_left">
              【 登记号：<span>{{ stuList.projId }}</span> 】
            </div>
            <div class="hd_right">
              审核结果：<span
                style="margin-right: 20px"
                :class="
                  auditColor == '0'
                    ? ''
                    : auditColor == 'Y'
                    ? 'color_success'
                    : 'color_error'
                "
                >{{ auditStatus(stuList.auditStatus) }}</span
              >{{ stuList.auditReason }}
            </div>
          </div>
          <div class="bd">
            <el-form
              :inline="true"
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="160px"
              class="demo-ruleForm"
            >
              <!-- 学生信息 -->
              <div class="reporting-list">
                <div class="list-hd edit-btn">
                  <h3 class="title">学生信息</h3>
                  <!-- <el-button
                    v-if="delayResult"
                    size="mini"
                    type="primary"
                    plain
                    >确认修改</el-button
                  > -->
                </div>
                <div class="list-bd">
                  <!-- 学生姓名 -->
                  <el-form-item
                    label="学生姓名："
                    prop="name"
                    style="width: calc(50% - 10px)"
                  >
                    <el-input
                      v-model.trim="ruleForm.name"
                      placeholder="请输入学生姓名"
                    >
                    </el-input>
                  </el-form-item>
                  <!-- 身份证号 -->
                  <el-form-item
                    label="身份证号："
                    prop="idno"
                    style="width: calc(50% - 10px)"
                  >
                    <el-input
                      v-model="ruleForm.idno"
                      @change="idChange"
                      placeholder="请输入身份证号"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                  <!-- 出生日期 -->
                  <el-form-item
                    label="出生日期："
                    prop="birth"
                    style="width: calc(50% - 10px)"
                  >
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="ruleForm.birth"
                      style="width: 100%"
                      disabled
                    ></el-date-picker>
                  </el-form-item>
                  <!-- 性别 -->
                  <el-form-item
                    label="性别："
                    prop="gender"
                    style="width: calc(50% - 10px)"
                  >
                    <el-input v-model="ruleForm.gender" disabled> </el-input>
                  </el-form-item>
                  <!-- 登录密码 -->
                  <el-form-item
                    label="登录密码："
                    prop="pwd"
                    style="width: calc(50% - 10px)"
                  >
                    <el-input
                      v-model="ruleForm.pwd"
                      placeholder="请输入密码"
                      show-password
                    ></el-input>
                  </el-form-item>
                  <!-- 应入学时间-->
                  <el-form-item
                    label="应入学时间："
                    prop="studyTime"
                    style="width: calc(50% - 10px)"
                  >
                    <el-date-picker
                      type="date"
                      placeholder="选择日期"
                      v-model="ruleForm.studyTime"
                      style="width: 100%"
                      disabled
                    ></el-date-picker>
                  </el-form-item>
                  <!-- 户籍类型 -->
                  <el-form-item
                    label="户籍类型："
                    prop="ogType"
                    style="width: calc(50% - 10px)"
                  >
                    <el-select
                      v-model="ruleForm.ogType"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option label="非农户口" value="非农户口"></el-option>
                      <el-option label="农业户口" value="农业户口"></el-option>
                    </el-select>
                  </el-form-item>
                  <!-- 民族 -->
                  <el-form-item
                    label="民族："
                    prop="nation"
                    style="width: calc(50% - 10px)"
                  >
                    <el-select
                      v-model="ruleForm.nation"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        :label="item.name"
                        :value="item.name"
                        v-for="(item, index) in nations"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <!-- 手机号 -->
                  <el-form-item
                    label="手机号："
                    prop="phone"
                    style="width: calc(50% - 10px)"
                  >
                    <el-input
                      v-model.trim="ruleForm.phone"
                      placeholder="请输入手机号"
                    >
                    </el-input>
                  </el-form-item>
                  <!-- 审批意见 -->
                  <el-form-item
                    label="乡(镇)人民政府审批意见："
                    prop="communityStatus"
                    style="width: calc(50% - 10px)"
                    class="wid_190"
                  >
                    <el-select
                      v-model="ruleForm.communityStatus"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option label="未审批" value="0"></el-option>
                      <el-option label="同意" value="Y"></el-option>
                      <el-option label="不同意" value="N"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="县(市)教育局行政部门或州教育局审批意见："
                    prop="cityStatus"
                    style="width: 100%"
                    class="wid_190 wid_277"
                  >
                    <el-select
                      v-model="ruleForm.cityStatus"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option label="未审批" value="0"></el-option>
                      <el-option label="同意" value="Y"></el-option>
                      <el-option label="不同意" value="N"></el-option>
                    </el-select>
                  </el-form-item>
                  <!-- 户籍地址 -->
                  <el-form-item
                    class="domicile"
                    label="户籍地址："
                    prop="address"
                    style="width: calc(100% - 10px)"
                  >
                    <el-select
                      v-model="ruleForm.regionCode"
                      filterable
                      placeholder="请选择区县"
                      style="width: 20%; margin-right: 10px"
                      @change="changeBlock"
                    >
                      <el-option
                        :label="item.regionName"
                        :value="item.regionCode"
                        v-for="(item, index) in liveBlockLists"
                        :key="index"
                      ></el-option>
                    </el-select>
                    <el-select
                      v-model="ruleForm.street"
                      filterable
                      placeholder="请选择街道"
                      style="width: 20%; margin-right: 10px"
                      @change="changeStreet"
                    >
                      <el-option
                        :label="item.regionName"
                        :value="item.regionCode"
                        v-for="(item, index) in liveStreets"
                        :key="index"
                      ></el-option>
                    </el-select>
                    <el-select
                      v-model="ruleForm.community"
                      filterable
                      placeholder="请选择小区"
                      style="width: 21%; margin-right: 10px"
                    >
                      <el-option
                        :label="item.regionName"
                        :value="item.regionCode"
                        v-for="(item, index) in liveCommunitys"
                        :key="index"
                      ></el-option>
                    </el-select>
                    <el-input
                      v-model.trim="ruleForm.address"
                      style="width: 34%"
                      placeholder="楼栋-单元-房号，1-2-302"
                    >
                    </el-input>
                  </el-form-item>
                </div>
              </div>
              <!-- 延缓入学信息 -->
              <div class="reporting-list">
                <div class="list-hd">
                  <h3 class="title">延缓入学信息</h3>
                </div>
                <div class="list-bd">
                  <el-form-item
                    label="延缓后去向："
                    prop="delayGo"
                    style="width: 100%; margin-bottom: 20px"
                    class="wid delay-err"
                  >
                    <el-input
                      type="textarea"
                      v-model.trim="ruleForm.delayGo"
                      placeholder="请输入延缓后去向"
                      maxlength="50"
                      show-word-limit
                      resize="none"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="延缓原因："
                    prop="delayReason"
                    style="width: 100%; margin-bottom: 16px"
                    class="wid delay-err"
                  >
                    <el-input
                      type="textarea"
                      v-model.trim="ruleForm.delayReason"
                      placeholder="请输入延缓原因"
                      maxlength="50"
                      show-word-limit
                      resize="none"
                    >
                    </el-input>
                  </el-form-item>
                </div>
              </div>
              <!-- 监护人信息 -->
              <div class="reporting-list">
                <div class="list-hd">
                  <h3 class="title">监护人信息</h3>
                </div>
                <div class="list-bd">
                  <!-- 监护人1 -->
                  <el-form-item
                    label="监护人姓名："
                    prop="parName"
                    style="width: calc(50% - 10px)"
                  >
                    <el-input
                      v-model.trim="ruleForm.parName"
                      placeholder="请输入名字"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="身份证号："
                    prop="parIdno"
                    style="width: calc(50% - 10px)"
                  >
                    <el-input
                      v-model.trim="ruleForm.parIdno"
                      placeholder="请输入身份证号"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="手机号码："
                    prop="parPhone"
                    style="width: calc(50% - 10px)"
                  >
                    <el-input
                      v-model.trim="ruleForm.parPhone"
                      placeholder="请输入手机号码"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="与学生关系："
                    prop="parRlat"
                    style="width: calc(50% - 10px)"
                  >
                    <el-select
                      v-model="ruleForm.parRlat"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <!-- <el-option label="请选择" value=""></el-option> -->
                      <el-option
                        label="父子（父女）"
                        value="父子（父女）"
                      ></el-option>
                      <el-option
                        label="母子（母女）"
                        value="母子（母女）"
                      ></el-option>
                      <el-option label="祖孙" value="祖孙"></el-option>
                      <el-option label="领养" value="领养"></el-option>
                      <el-option label="其他" value="其他"></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
              <!-- 佐证资料 -->
              <div class="upload-data fn-clearfix">
                <div class="upload-list">
                  <div class="list-hd">
                    <h3 class="title">
                      {{ delayImageInfo.imgTitle
                      }}<i>{{ delayImageInfo.imgIntro }}</i>
                    </h3>
                    <p>
                      上传资料须知：<span
                        >可点击查看原图，上传时请注意图片方向，保持正常观看，注意保证图片清晰完整，保存成功后图片会显示在页面中；上传失败请点击图片重新上传；</span
                      >
                    </p>
                  </div>
                  <div class="list-bd">
                    <div class="uploadImgBox">
                      <el-upload
                        class="avatar-uploader"
                        :class="{
                          'limit-uploader':
                            delayImage.length == delayImageInfo.maxNum ||
                            stuList.auditStatus == 'Y',
                        }"
                        :action="uploadUrl()"
                        list-type="picture-card"
                        :limit="delayImageInfo.maxNum"
                        :multiple="isMultiple"
                        :before-upload="beforeAvatarUpload"
                        :on-exceed="handleExceed"
                        :http-request="
                          (file) =>
                            handleHttpRequest(file, delayImageInfo.imgType)
                        "
                        :file-list="delayImage"
                      >
                        <i
                          slot="default"
                          class="el-icon-plus avatar-uploader-icon"
                        ></i>
                        <div slot="file" slot-scope="{ file }">
                          <img
                            class="el-upload-list__item-thumbnail"
                            :src="file.url"
                            alt=""
                          />
                          <span class="el-upload-list__item-actions">
                            <span
                              class="el-upload-list__item-preview"
                              @click="handlePreview(file)"
                            >
                              <i class="el-icon-zoom-in"></i>
                            </span>
                            <span
                              class="el-upload-list__item-delete"
                              @click="handleRemove(file)"
                            >
                              <i class="el-icon-delete"></i>
                            </span>
                          </span>
                        </div>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">
                        <div class="handlePicture">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureRotateLeft"
                          >
                            <el-button
                              type="text"
                              icon="el-icon-refresh-left"
                              title="左旋转"
                              style="font-size: 20px"
                            ></el-button>
                          </span>
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureRotateBack"
                          >
                            <el-button
                              type="text"
                              icon="el-icon-full-screen"
                              title="原图"
                              style="font-size: 20px"
                            ></el-button>
                          </span>
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureRotateRight"
                          >
                            <el-button
                              type="text"
                              icon="el-icon-refresh-right"
                              title="右旋转"
                              style="font-size: 20px"
                            ></el-button>
                          </span>
                        </div>
                        <!-- <div class="handlePicture">
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureRotateLeft"
                          >
                            <el-button
                              type="text"
                              icon="el-icon-refresh-left"
                              title="向左旋转"
                              style="font-size: 20px"
                            ></el-button>
                          </span>
                          <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureRotateRight"
                          >
                            <el-button
                              type="text"
                              icon="el-icon-refresh-right"
                              title="向右旋转"
                              style="font-size: 20px"
                            ></el-button>
                          </span>
                        </div> -->
                        <img :src="dialogImageUrl" alt="" ref="dialogImg" />
                      </el-dialog>
                    </div>
                  </div>
                </div>
              </div>
              <el-form-item
                style="width: calc(100% - 10px); margin: 10px"
                class="reporting-btn"
              >
                <el-button
                  v-if="stuList.auditStatus != 'Y'"
                  type="primary"
                  size="small"
                  @click="submitForm('ruleForm')"
                  >{{ delayResult ? "确认修改" : "提交" }}</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { regionData, CodeToText, TextToCode } from "element-china-area-data";
import localDb from "../utils/localDb";
import fetches from "../utils/request";
import {
  getStudDelayInfo,
  getStudDelayImage,
  submitStudDelayInfo,
  getStreet,
  getCommunity,
  uploadDelayImage,
  delUploadImage,
  updatePersonDelay,
} from "../utils/api";
const { defaultHost } = fetches;

export default {
  name: "DelayApply",
  data() {
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入手机号"));
      } else if (/^1[34578]\d{9}$/.test(value) == false) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: "", //学生姓名
        idno: "", //学生身份证
        birth: "", //出生日期
        gender: "", //性别
        nation: "", //民族
        studyTime: "", //应入学时间
        ogType: "", //户籍类型
        phone: "", //手机号码
        pwd: "", //登录密码
        regionCode: "", // 户籍区县/居住区县
        street: "", //户籍街道/居住街道
        community: "", //户籍小区/居住小区
        address: "", //户籍详细地址/居住详细地址
        parName: "", //监护人1姓名
        parIdno: "", //监护人1身份证号
        parPhone: "", //监护人1联系电话
        parRlat: "", //监护人1生源关系
        delayGo: "", //延缓后去向
        delayReason: "", //延缓原因
        communityStatus: "", //乡（镇)人民政府审批意见
        cityStatus: "", //县市教育行政部门或州教育局审批意见
      },
      rules: {
        name: [
          { required: true, message: "请输入真实的学生姓名", trigger: "blur" },
          {
            pattern: /(^.{1,100}$)/,
            message: "输入长度在100以内",
          },
        ],
        idno: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "你的身份证格式不正确",
          },
        ],
        phone: [
          {
            required: true,
            trigger: "blur",
            validator: validatePhone,
          },
        ],
        ogType: [
          { required: true, message: "请选择户籍类型", trigger: "change" },
        ],
        pwd: [
          { required: true, message: "请输入登录密码", trigger: "blur" },
          {
            pattern: /(^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$)/,
            message: "您的密码格式不正确,密码由6-20位数字和字母组成",
          },
        ],
        nation: [{ required: true, message: "请选择民族", trigger: "change" }],

        address: [
          {
            required: true,
            message: "请输入详细地址",
            trigger: "blur",
          },
          {
            pattern: /(^.{1,100}$)/,
            message: "输入长度在100以内",
          },
        ],
        parName: [
          { required: true, message: "请输入监护人1的姓名", trigger: "blur" },
          {
            pattern: /(^.{1,100}$)/,
            message: "输入长度在100以内",
          },
        ],
        parIdno: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "你的身份证格式不正确",
          },
        ],
        parPhone: [
          {
            required: true,
            trigger: "blur",
            validator: validatePhone,
          },
        ],
        parRlat: [
          { required: true, message: "请选择学生关系", trigger: "blur" },
        ],
        delayGo: [
          {
            required: true,
            message: "请输入延缓后去向，在50个字以内",
            trigger: "blur",
          },
          {
            pattern: /(^.{1,100}$)/,
            message: "输入长度在100以内",
          },
        ],
        delayReason: [
          {
            required: true,
            message: "请输入延缓原因，在50个字以内",
            trigger: "blur",
          },
          {
            pattern: /(^.{1,100}$)/,
            message: "输入长度在100以内",
          },
        ],
        communityStatus: [
          {
            required: true,
            message: "请选择乡(镇)人民政府审批意见",
            trigger: "change",
          },
        ],
        cityStatus: [
          {
            required: true,
            message: "请选择县市教育局行政部门或州教育局审批意见",
            trigger: "change",
          },
        ],
      },
      options: regionData,
      selectedOptions: [],
      stuList: [],
      nations: [
        { id: 1, name: "汉族" },
        { id: 2, name: "蒙古族" },
        { id: 3, name: "回族" },
        { id: 4, name: "藏族" },
        { id: 5, name: "维吾尔族" },
        { id: 6, name: "苗族" },
        { id: 7, name: "彝族" },
        { id: 8, name: "壮族" },
        { id: 9, name: "布依族" },
        { id: 10, name: "朝鲜族" },
        { id: 11, name: "满族" },
        { id: 12, name: "侗族" },
        { id: 13, name: "瑶族" },
        { id: 14, name: "白族" },
        { id: 15, name: "土家族" },
        { id: 16, name: "哈尼族" },
        { id: 17, name: "哈萨克族" },
        { id: 18, name: "傣族" },
        { id: 19, name: "黎族" },
        { id: 20, name: "傈僳族" },
        { id: 21, name: "佤族" },
        { id: 22, name: "畲族" },
        { id: 23, name: "高山族" },
        { id: 24, name: "拉祜族" },
        { id: 25, name: "水族" },
        { id: 26, name: "东乡族" },
        { id: 27, name: "纳西族" },
        { id: 28, name: "景颇族" },
        { id: 29, name: "柯尔克孜族" },
        { id: 30, name: "土族" },
        { id: 31, name: "达翰尔族" },
        { id: 32, name: "么佬族" },
        { id: 33, name: "羌族" },
        { id: 34, name: "布朗族" },
        { id: 35, name: "撒拉族" },
        { id: 36, name: "毛南族" },
        { id: 37, name: "仡佬族" },
        { id: 38, name: "锡伯族" },
        { id: 39, name: "阿昌族" },
        { id: 40, name: "普米族" },
        { id: 41, name: "塔吉克族" },
        { id: 42, name: "怒族" },
        { id: 43, name: "乌孜别克族" },
        { id: 44, name: "俄罗斯族" },
        { id: 45, name: "鄂温克族" },
        { id: 46, name: "德昂族" },
        { id: 47, name: "保安族" },
        { id: 48, name: "裕固族" },
        { id: 49, name: "京族" },
        { id: 50, name: "塔塔尔族" },
        { id: 51, name: "独龙族" },
        { id: 52, name: "鄂伦春族" },
        { id: 53, name: "赫哲族" },
        { id: 54, name: "门巴族" },
        { id: 55, name: "珞巴族" },
        { id: 56, name: "基诺族" },
      ], //民族
      liveBlockLists: [], //区县
      liveStreets: [], //街道
      liveCommunitys: [], //小区
      // 佐证资料
      dialogImageUrl: "",
      dialogVisible: false,
      isMultiple: true,
      deg: 0,
      scale: 1,
      // hkList: [], //户口本图片列表
      delayImage: [], //延缓入学图片列表
      auditColor: "",
      // isSubmit: true,
      delayImageInfo: {},
      delayResult: false,
    };
  },
  methods: {
    // 审核结果
    auditStatus(type) {
      switch (type) {
        case "0":
          return "等待审核中...";
        // break;
        case "Y":
          return "审核已通过";
        // break;
        case "N":
          return "审核未通过";
        // break;
        default:
          break;
      }
    },
    handleChange() {
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      this.ruleForm.origProv =
        CodeToText[this.selectedOptions[0]] +
        "/" +
        CodeToText[this.selectedOptions[1]] +
        "/" +
        CodeToText[this.selectedOptions[2]];
    },
    //获取当前居住区县下的街道
    async changeBlock(val) {
      const data = await getStreet(val);
      try {
        if (data.res == 0) {
          this.liveStreets = data.data;
          this.ruleForm.street = "";
          this.ruleForm.community = "";
          this.ruleForm.address = "";
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {}
    },
    //获取当前居住地街道下的小区
    async changeStreet(val) {
      const data = await getCommunity(val);
      try {
        if (data.res == 0) {
          this.liveCommunitys = data.data;
          this.ruleForm.community = "";
          this.ruleForm.address = "";
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {}
    },
    //回填出生年月和性别
    idChange() {
      // if (this.stuList.regType != 4 && this.stuList.noOrig != "Y") {
      //   this.ruleForm.gender = this.formatId(this.ruleForm.idno, 2);
      //   this.ruleForm.birth = this.formatId(this.ruleForm.idno, 1);
      // }
    },
    //图片上传地址
    uploadUrl() {
      return `${defaultHost}/api/Student/UploadDelayImage`;
    },
    //图片格式限制
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/jpg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 10;
      file.deg = 0;
      if (!isJPG) {
        this.$message.error("上传图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 10MB!");
      }
      return isJPG && isLt2M;
    },
    //图片上传超过数量限制
    handleExceed() {
      this.$message.error("上传图片不能超过数量限制!");
    },
    //删除图片
    handleRemove(file) {
      this.$confirm("确定删除这张图片吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        try {
          const data = await delUploadImage(file.id, file.imgSource);
          if (data.res == 0) {
            this.$message({
              message: "删除成功",
              type: "success",
              duration: 1500,
            });
            this.getDelayImageInfo();
          } else {
            this.$message.error(data.msg);
          }
        } catch (error) {
          this.$message.error("删除失败");
        }
      });
    },
    //上传图片
    async handleHttpRequest(file, imageType) {
      let formData = new FormData();
      formData.append("file", file.file);
      formData.append("imgType", imageType);
      localDb.set("upload", "upload");
      const data = await uploadDelayImage(imageType, formData);
      try {
        if (data.res == 0) {
          this.$message({
            message: "上传成功",
            type: "success",
            duration: 1500,
          });
          localDb.clear("1", "upload");
          // this.reload();
          this.getDelayImageInfo();
        } else {
          localDb.clear("1", "upload");
          this.$message.error(data.msg);
        }
      } catch (error) {
        localDb.clear("1", "upload");
        this.getDelayImageInfo();
        this.$message.error("上传失败");
      }
    },
    //预览图片
    handlePreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      this.deg = 0;
      // this.scale = 1;
      this.$nextTick(() => {
        this.$refs.dialogImg.style.transform = "rotate(" + this.deg + "deg)";
        // this.$refs.dialogImg.style.transform = "scale(" + this.scale + ")";
      });
    },
    //图片左旋转 / 缩小
    handlePictureRotateLeft() {
      this.deg += -90;
      this.$refs.dialogImg.style.transform = "rotate(" + this.deg + "deg)";
      // this.scale += -0.2;
      // if (this.scale <= 0.2) {
      //   this.scale = 1;
      // }
      // this.$refs.dialogImg.style.transform = "scale(" + this.scale + ")";
    },
    // 原图
    handlePictureRotateBack() {
      // this.scale = 1;
      // this.$refs.dialogImg.style.transform = "scale(" + this.scale + ")";
      this.deg = 0;
      this.$refs.dialogImg.style.transform = "rotate(" + this.deg + "deg)";
    },
    //图片右旋转 / 放大
    handlePictureRotateRight() {
      this.deg += 90;
      this.$refs.dialogImg.style.transform = "rotate(" + this.deg + "deg)";
      // this.scale += 0.2;
      // if (this.scale >= 1.8) {
      //   this.scale = 1;
      // }
      // this.$refs.dialogImg.style.transform = "scale(" + this.scale + ")";
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.ruleForm.regionCode == "") {
            this.$message.error("请选择区县");
            return false;
          }
          if (this.ruleForm.street == "") {
            this.$message.error("请选择街道");
            return false;
          }
          if (this.ruleForm.community == "") {
            this.$message.error("请选择小区");
            return false;
          }
          if (this.ruleForm.communityStatus != "Y") {
            if (this.ruleForm.cityStatus != "Y") {
              this.$message.error(
                "请先取得乡(镇)人民政府同意或者县市教育局行政部门或州教育局同意"
              );
              return false;
            }
          }
          if (!this.delayImage.length) {
            this.$message.error("请上传延缓入学材料");
            return false;
          }
          // if (!this.isSubmit) {
          //   this.$message.error("请勿重复提交");
          //   return false;
          // }
          let params = this.ruleForm;
          try {
            const data = await submitStudDelayInfo(params);
            if (data.res == 0) {
              // 确认修改重置审核状态
              if (this.delayResult) {
                const auditStatus = "0";
                try {
                  const data = await updatePersonDelay(auditStatus);
                } catch (error) {}
                this.$message({
                  message: "修改成功",
                  type: "success",
                  duration: 1500,
                });
              }
              setTimeout(() => {
                location.reload();
                document.documentElement.scrollTop = "0px";
              }, 1500);
              // this.getStuList();
            } else {
              this.$message.error(data.msg);
            }
          } catch (error) {}
        } else {
          return false;
        }
      });
    },
    //获取学生信息数据
    async getStuList() {
      try {
        const data = await getStudDelayInfo();
        if (data.res == 0) {
          this.stuList = data.data.personDelay;
          this.liveBlockLists = data.data.regionBlockList;
          this.auditColor = this.stuList.auditStatus;
          this.$store.dispatch("setStuList", data.data.personDelay);
          this.ruleForm = this.stuList;
          this.ruleForm.nation = this.stuList.nation || "";
          this.ruleForm.ogType = this.stuList.ogType || "";
          this.ruleForm.communityStatus = this.stuList.communityStatus || "";
          this.ruleForm.cityStatus = this.stuList.cityStatus || "";
          const newDate = new Date();
          this.ruleForm.studyTime = newDate.getFullYear() + "-09-01";
          this.$store.dispatch("setUser", data.data.personDelay.name);
          //省市区字符串转换
          this.selectedOptions = [];
          if (this.stuList.ogRegion) {
            let address = this.stuList.ogRegion.split("/");
            // 省份
            this.selectedOptions.push(TextToCode[address[0]].code);
            // 城市
            let cityCode = TextToCode[address[0]][address[1]].code;
            this.selectedOptions.push(cityCode);
            // 地区
            let areaCode = TextToCode[address[0]][address[1]][address[2]].code;
            this.selectedOptions.push(areaCode);
          }
          // 回填区县对应的街道
          if (this.stuList.regionCode) {
            try {
              const data = await getStreet(this.stuList.regionCode);
              if (data.res == 0) {
                this.liveStreets = data.data;
                this.ruleForm.street = this.stuList.street;
              } else {
                this.$message.error(data.msg);
              }
            } catch (error) {}
          }
          //回填街道对应的小区
          if (this.stuList.street) {
            try {
              const data = await getCommunity(this.stuList.street);
              if (data.res == 0) {
                this.liveCommunitys = data.data;
                this.ruleForm.community = this.stuList.community;
              } else {
                this.$message.error(data.msg);
              }
            } catch (error) {}
          }

          if (
            this.stuList.delayGo &&
            this.stuList.delayReason &&
            this.stuList.communityStatus
          ) {
            this.delayResult = true;
          }
        } else {
          this.$message.error(data.msg);
        }
      } catch (error) {}
    },
    // 获取延缓入学图片信息
    async getDelayImageInfo() {
      try {
        const data = await getStudDelayImage();
        if (data.res == 0) {
          this.delayImageInfo = data.data[0];
          this.delayImage = this.delayImageInfo.regImages;

          this.delayImageInfo.regImages.forEach((item) => {
            item.url = defaultHost + item.imgUrl;
          });
        }
      } catch (error) {}
    },
  },
  mounted() {
    this.getStuList();
    this.getDelayImageInfo();
  },
};
</script>

<style lang="scss" scoped>
.delayApply_index {
  height: 100%;
}
.delay_wrap {
  padding-top: 30px;
  padding-bottom: 30px;
  .delay_hd {
    .title {
      height: 46px;
      border-radius: 4px;
      color: #fff;
      font-size: 20px;
      text-align: center;
      background: url(~@/assets/images/bg_edit.png) no-repeat center;
      font-weight: bold;
      i {
        position: relative;
        display: inline-block;
        line-height: 43px;
        border-radius: 4px;
        &::before {
          position: absolute;
          top: 15px;
          left: -25px;
          content: "";
          width: 16px;
          height: 16px;
          background: url(~@/assets/images/pic_btzs.png) no-repeat center/cover;
        }
        &::after {
          position: absolute;
          top: 15px;
          right: -25px;
          content: "";
          width: 16px;
          height: 16px;
          background: url(~@/assets/images/pic_btzs.png) no-repeat center/cover;
        }
      }
    }
  }
  .delay_bd {
    background-color: #fff;
    padding: 20px;
    .hd {
      height: 46px;
      border-radius: 4px;
      border: solid 1px #9fd6fe;
      margin-bottom: 20px;
      display: flex;
      line-height: 46px;
      font-size: 16px;
      .hd_left {
        width: 175px;
        height: 100%;
        border-radius: 4px 0px 0px 4px;
        background-color: #0195ff;
        color: #fff;
        text-align: center;
        margin-right: 30px;
        font-family: MicrosoftYaHei-Bold;
        // font-weight: bold;
      }
      .hd_right {
        font-weight: 700;
        color: #222;
        line-height: 44px;
        .color_success {
          color: #3fa264;
        }
        .color_error {
          color: #ff0000;
        }
      }
    }
    .bd {
      .reporting-list {
        margin-bottom: 20px;
        .list-hd {
          position: relative;
          margin-bottom: 20px;
          h3 {
            //   border-left: 3px solid #0195ff;
            font-size: 16px;
            color: #222;
            background: none;
            padding-left: 8px;
          }
          &::before {
            content: "";
            width: 3px;
            height: 16px;
            background-color: #0195ff;
            position: absolute;
            top: 4px;
            left: 0;
          }
          &.edit-btn {
            .el-button {
              float: right;
              margin-top: -27px;
            }
          }
        }
        .list-bd {
          .el-form-item {
            margin-bottom: 12px;
            p.notice {
              color: #999;
              font-size: 12px;
              margin: -10px 15px 0;
            }
            .el-form-item__content {
              .el-cascader {
                margin-right: 4px !important;
              }
              .el-textarea {
                /deep/ .el-textarea__inner {
                  padding-right: 60px;
                }
              }
            }
            /deep/ .el-form-item__error {
              padding-left: 15px;
              padding-top: 1px;
            }
          }
          .delay-err {
            /deep/ .el-form-item__content {
              /deep/ .el-form-item__error {
                padding-top: 4px;
              }
            }
          }
          .wid {
            /deep/ .el-form-item__content {
              width: 82%;
            }
          }
          .wid_190 {
            margin-left: -30px;
            /deep/ .el-form-item__label {
              width: 190px !important;
            }
            // .el-select {
            //   width: 160px !important;
            // }
          }
          .wid_277 {
            margin-left: -5px;
            /deep/ .el-form-item__label {
              line-height: 20px;
              padding-right: 7px;
              width: 166px !important;
            }
            /deep/ .el-form-item__content {
              width: 82% !important;
            }
          }
        }
      }
      .upload-list {
        .list-hd {
          position: relative;
          &::before {
            content: "";
            width: 3px;
            height: 16px;
            background-color: #0195ff;
            position: absolute;
            top: 4px;
            left: 0;
          }
          .title {
            font-size: 16px;
            padding-left: 8px;
            color: #222;
            i {
              margin-left: 10px;
              color: #ff0000;
              font-size: 14px;
              font-weight: normal;
            }
          }
          p {
            color: #f81d22;
            font-weight: 700;
            margin: 10px 0;
            span {
              color: #222222;
              font-weight: normal;
            }
          }
        }
        .list-bd {
          padding: 4px 0 10px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.demo-ruleForm {
  .el-form-item__label {
    padding-right: 0;
  }
}
.el-form--inline .el-form-item__content {
  width: 65%;
}
.el-form--inline .domicile .el-form-item__content {
  width: 84%;
}
.el-form--inline {
  .reporting-btn {
    .el-form-item__content {
      width: 100%;
      text-align: center;
    }
  }
}
.uploadImgBox {
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 10px;
    background: #fafafa;
    cursor: pointer;
    position: relative;
    width: 265px;
    height: 210px;
    margin: 0 10px 10px;
    line-height: 210px;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: $bsC;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 265px;
    height: 210px;
    line-height: 210px;
    text-align: center;
  }
  .el-upload-list--picture-card .el-upload-list__item {
    width: 265px;
    height: 210px;
    margin: 0 10px 10px;
    border: none;
    border-radius: 10px;
  }
  .el-upload-list__item {
    transition: none !important;
    > div {
      height: 100%;
      text-align: center;
      background: #000;
      img {
        /*width:auto;*/
        vertical-align: top;
        object-fit: cover;
      }
    }
  }
  .el-upload-list__item.is-success .el-upload-list__item-status-label {
    display: none;
  }
  .el-upload-list__item.is-success:focus:not(:hover) .el-icon-close-tip {
    display: none;
  }
  .limit-uploader .el-upload--picture-card {
    display: none;
  }
  .el-form--inline {
    .reporting-btn {
      .el-form-item__content {
        width: 100%;
        text-align: center;
      }
    }
  }
  .el-dialog__wrapper {
    text-align: center;
    .el-dialog {
      display: inline-block;
      width: 100%;
      height: 100%;
      box-shadow: none;
      background: none;
      margin-top: 0 !important;
    }
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__body {
      padding: 0;
      width: 100%;
      height: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      > img {
        max-height: 100%;
        max-width: 100%;
      }
    }
    .handlePicture {
      position: absolute;
      left: 50%;
      bottom: 30px;
      z-index: 22;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      width: 282px;
      height: 44px;
      line-height: 44px;
      padding: 0 23px;
      background-color: #606266;
      border-color: #fff;
      border-radius: 22px;
      text-align: center;
      opacity: 0.8;
      .el-button {
        padding: 8px 20px;
        color: #fff;
      }
    }
    .el-dialog__headerbtn {
      z-index: 22;
      right: 100px;
    }
    .el-dialog__headerbtn .el-dialog__close {
      right: 40px;
      color: #fff;
      font-size: 22px;
      padding: 8px;
      border: 1px #fff solid;
      border-radius: 100%;
    }
  }
}
</style>
